import { Link } from 'react-router-dom'
import { motion } from 'framer-motion'
import Button from '../components/shared/Button'
import { FiArrowLeft } from 'react-icons/fi'

function NotFound() {
  return (
    <div className="min-h-[80vh] flex items-center justify-center">
      <div className="container-custom py-16 text-center">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <h1 className="text-9xl font-bold text-primary-500 mb-8">404</h1>
          <h2 className="text-3xl md:text-4xl font-medium text-secondary-900 dark:text-white mb-6">
            Page Not Found
          </h2>
          <p className="text-lg text-secondary-600 dark:text-secondary-300 max-w-lg mx-auto mb-8">
            The page you're looking for doesn't exist or has been moved.
          </p>
          <Button to="/" size="lg">
            <FiArrowLeft className="mr-2" /> Back to Home
          </Button>
        </motion.div>
      </div>
    </div>
  )
}

export default NotFound